<template>
  <el-card class="swiper-container">
    <template #header>
      <div class="header">
        <el-button type="primary" @click="dialog(0)">增加</el-button>

        <el-button-group>
          <el-popconfirm title="确定删除吗？" @confirm="deleted">
            <template #reference>
              <el-button type="danger">批量删除</el-button>
            </template>
          </el-popconfirm>
          <el-button type="warning">总数</el-button>
          <el-button>{{ state.total }} 条</el-button>
        </el-button-group>
      </div>
    </template>
    <el-table v-loading="state.loading" ref="multipleTable" :data="state.tableData" tooltip-effect="dark"
      style="width: 100%" @selection-change="selectionChangeIds">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="id" label="#ID" align="center" width="100"/>
      <el-table-column v-viewer label="轮播图">
        <template #default="scope">
          <img class="img-banner"
            :src="scope.row.image"
            @click="preview(scope.row)"
            alt=""/>
        </template>
      </el-table-column>
      <el-table-column label="排序值" align="center" width="160">
        <template #default="scope">
          <el-input v-model.number="scope.row.orderby"
            @change="ranked(scope.row)"
            :input-style="{
                textAlign: 'center'
              }"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="添加时间" align="center" width="260">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button type="primary" @click="dialog(scope.row.id)">修改</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="deleted(scope.row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <dialog-banner ref="refBanner" :reload="getList"/>

  <!-- Image Preview -->
  <viewer :images="images">
    <img v-for="src in images" :key="src" :src="src">
  </viewer>
</template>


<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { toDateTime } from "../utils";
import crud from "../utils/crud";
import { AdminBannerDel, AdminBannerList, AdminBannerPost } from "../api/server/banner";
import DialogBanner from "../components/DialogBanner.vue";

const { proxy } = getCurrentInstance()
const images = ref([])
const refBanner = ref(null)
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  selectedIds: [], // 选中项
  total: 0, // 总条数
});

onMounted(async () => {
  await getList()
})

const getList = async () => {
  state.loading = true
  let { data } = await AdminBannerList()
  state.tableData = data
  state.total = data.length
  state.loading = false
}

const selectionChangeIds = row => state.selectedIds = row
const preview = (row) => proxy.$viewerApi({ images: [row.image] })
const ranked = row => crud.update(AdminBannerPost, row, getList)
const dialog = id => crud.dialog(refBanner, id)
const deleted = row => crud.delete(AdminBannerDel, row, state.selectedIds, getList)
</script>

<style scoped>
.swiper-container {
  min-height: 100%;
}

:deep(.el-card.is-always-shadow) {
  min-height: 100%;
}

img.img-banner {
  width: 140px;
  height: 72px;
  border-radius: 12px;
  border: 1px dotted rgb(64 158 255 / 33%);
  object-fit: cover;
  cursor: pointer;
}

</style>
